<template>
    <div v-show="showTargetMenu" style="position: absolute;width: 100px;height: 200px;background-color: blueviolet;display: flex;
            flex-direction: column;align-items: center;" :style="menuCoorderate">
        <div class="item" @click="handlerOpen">打开</div>
        <div class="item" @click="handlerDownload">下载</div>
        <div class="item" @click="rename">重命名</div>
        <div class="item" @click="del">删除</div>
        <div v-show="isTrashBin" class="item" @click="resume">恢复</div>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const props = defineProps<{
    showTargetMenu: boolean,
    menuCoorderate: any,
    isTrashBin: boolean
}>()

const emit = defineEmits<{
    (e: 'handlerOpen'): void
    (e: 'handlerDownload'): void
    (e: 'rename'): void
    (e: 'del'): void
    (e: 'resume'): void
}>()

const resume = () => {
    emit('resume')
}
const handlerOpen = () => {
    emit('handlerOpen')
}
const handlerDownload = () => {
    emit('handlerDownload')
}
const rename = () => {
    emit('rename')
}
const del = () => {
    emit('del')
}
</script>
<style scoped>
.item {
    cursor: pointer;
    height: 30px;
    line-height: 30px;
    width: 100%;
    padding-left: 15px;
}

.item:hover {
    background-color: aliceblue;
}
</style>